<template>
  <div class="container">
    <h1 style="text-align: center; margin-bottom: 20px">创建任务</h1>
    <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
      <el-form-item label="客户" prop="elderId">
        <el-select
          v-model="form.elderId"
          placeholder="请选择客户"
          style="width: 100%"
        >
          <el-option
            v-for="item in elderList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="任务内容" prop="planDetails">
        <el-input
          v-model="form.planDetails"
          type="textarea"
          placeholder="请输入任务内容"
          rows="10"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { createPlan, getNurseList, getElderList } from "@/api/request";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
const formRef = ref();
const nurseList = ref([]);
const elderList = ref([]);
const router = useRouter();
const form = ref({
  elderId: "", // 客户id
  planDetails: "", // 任务详情
});
const rules = ref({
  elderId: [{ required: true, message: "请选择客户", trigger: "change" }],
  planDetails: [{ required: true, message: "请输入任务内容", trigger: "blur" }],
});

const getData = async () => {
  let res = await getNurseList({ page: 1, size: 1000 });
  nurseList.value = res.data.list;
  res = await getElderList({ page: 1, size: 1000 });
  elderList.value = res.data.list;
};
getData();

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await createPlan(form.value);
      ElMessage.success("创建成功");
      router.back();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style scoped>
.container {
  max-width: 800px;
}
.avatar-uploader {
  width: 128px;
  height: 128px;
  display: block;
  border: 1px dashed #636363;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
